import Vue from '@/main.js'
import i18n from '@/i18n'
import getThemeColor from '@/utils/themesColor'

function renderLine(option) {
  this._init(option)
}
renderLine.prototype = {
  _init: function(option) {
    this.grid = {
      left: '20px',
      right: '90px',
      bottom: '40px',
      top: '40px',
      containLabel: true
    }
    this.tooltip = {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: getThemeColor('axisPointerColor1') // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: getThemeColor('axisPointerColor2') // 100% 处的颜色
              },
              {
                offset: 1,
                color: getThemeColor('axisPointerColor1') // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      formatter: function(params) {
        // return `在${params[0].name}km处，衰减为${params[0].value}dB`
        let html = ''
        let str = ''
        params.forEach(e => {
          str += `<p>${e.seriesName}：${i18n.t('ATTENUATION_VALUE', {
            msg1: e.value[0],
            msg2: e.value[1]
          })}</p>`
        })
        if (str) {
          html += '<div>' + str + '</div>'
          return html
        }
      }
    }
    this.legend = {
      show: true,
      right: 0,
      icon: 'rect',
      textStyle: {
        color: getThemeColor('textFontColor'),
        fontSize: this.restSize(12)
      },
      selected: {
        [Vue.$t('REFERENCE_CURVE_LINE')]: false
      }
    }
    this.xAxis = [
      {
        name: Vue.$t('POSITION'),
        nameTextStyle: {
          color: getThemeColor('textColor') || '#444',
          fontSize: this.restSize(10)
        },
        type: 'value',
        axisTick: {
          show: true
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#17295D'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#17295D'
          }
        },
        axisLabel: {
          color: getThemeColor('textColor') || '#444',
          fontSize: this.restSize(12)
        },
        boundaryGap: false,
        max: function(value) {
          return Math.ceil(value.max)
        }
      }
    ]
    this.yAxis = [
      {
        name: Vue.$t('LINK_LOSSD_B'),
        nameTextStyle: {
          color: getThemeColor('textColor') || '#444',
          align: 'left',
          fontSize: this.restSize(10)
        },
        type: 'value',
        axisLabel: {
          formatter: '{value}/dB',
          color: getThemeColor('textColor') || '#444',
          fontSize: this.restSize(12)
        },
        axisTick: {
          show: true
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#17295D'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#17295D'
          }
        }
      }
    ]
    this.dataZoom = [
      {
        type: 'slider',
        start: 0,
        end: 100,
        height: 20,
        backgroundColor: getThemeColor('dataZoombackgroundColor'),
        dataBackground: {
          lineStyle: {
            color: '#fff9c1',
            width: 1
          }
        },
        fillerColor: getThemeColor('dataZoomfillerColor'),
        borderColor: getThemeColor('dataZoomborderColor'),
        handleSize: '80%',
        handleStyle: {
          color: '#a0f1fb',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        },
        textStyle: {
          color: getThemeColor('textColor') || '#444'
        },
        bottom: 5
      }
    ]
    this.color = [
      'rgba(32, 178, 232, 0.5)',
      'rgba(232, 98, 32, 0.5)',
      'rgba(0, 255, 240, 0.5)',
      'rgba(98, 227, 255, 0.5)'
    ]
    this.series = option.data || []
  },
  restSize(px) { // echarts动态改变字体大小 传入字体大小
    const clientWidth = window.innerWidth || document.body.clientWidth // 屏幕尺寸
    if (!clientWidth) { return 0 }
    const fontSize = clientWidth / 1920
    const count = px * fontSize
    if (count < px) {
      return px
    }
    return count
  },
  set_series: function(option) {
    return option.data
  }
}
export default renderLine
